import ECharts from '@/components/Echarts';

export default {
  components: {
    ECharts,
    editor: require("vue2-ace-editor"),
  },
  watch: {
    projectId: function (newProjectId) {
      this.$router.push("/report")
    }
  },
  computed: {
    projectId: function () {
      return this.$store.getters.getProjectId;
    },
  },
  data() {
    return {
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        fontSize: 12,
        showPrintMargin: false, //去除编辑器里的竖线
        readOnly: true
      },
      editor: "",
      activeNames: "1",
      isApiShow: false,
      apiShowData: {},
      activeName: 'first',
      responseActiveName: 'responseBody',
      testCaseGroupName: [], // 当前展开的一级折叠面板的名称
      testCaseGroup: [
        {
          testCaseGroupName: '一级面板1',
          testCaseName: [], // 当前展开的二级折叠面板的名称
          testResultLists: [
            {
              testCaseName: '二级面板1',
              apiRequestResults: [
                {
                  apiName: '三级面板1',
                  resultBody: '内容1',
                }
              ],
            },
          ]
        },
      ],
      chartOptions: {
        title: {
          text: '测试用例集执行结果',
          subtext: '纯属玩耍',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['测试通过', '测试失败']
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            // dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            // restore: {show: true},
            // saveAsImage: {show: true}
          }
        },
        calculable: true,
        series: [
          {
            name: '测试用例集执行结果',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 1, name: '测试通过'},
              {value: 1, name: '测试失败'},

            ]
          }
        ]
      },
    }
  },
  created() {
    let id = this.$route.query.id;
    this.getDetail({id: id})
  },
  methods: {
    editorInit() {
      require("brace/theme/chrome");
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/yaml");
      require("brace/mode/json");
      require("brace/mode/less");
      require("brace/snippets/json");
    },
    handleClick() {

    },
    rowClick(row, colum, envent) {
      console.log("row:", row);
      console.log("colum:", colum);
      console.log("envent:", envent);
      this.apiShowData = row;
      this.isApiShow = true;
    },
    getBack() {
      this.$router.back();
    },
    handleChange(val) {
      console.log(val);
    },
    getDetail(p) {
      this.$jobPlan
        .details(p)
        .then((res) => {
          if (res.code == 200) {
            // console.log(res.data)
            this.testCaseGroup.length = 0
            for (let groupResultLists of res.data.groupResultLists) {
              this.testCaseGroup.push(groupResultLists)
              console.log(this.testCaseGroup)
            }
            this.chartOptions.series[0].data[0].value = res.data.passTotal
            this.chartOptions.series[0].data[1].value = res.data.failedTotal
          }
        })
        .catch((res) => {
          console.log(res);
        });
    }
  }

}
